<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			.navbar {
				height: 60px;
				background: #fff;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				padding: 0 20px;
				position: relative;
				z-index: 100;
			}

			.logo {
				font-size: 22px;
				font-weight: bold;
				color: #409EFF;
				margin-right: 40px;
			}

			.nav-menu {
				flex: 1;
			}

			.user-info {
				display: flex;
				align-items: center;
			}

			.avatar {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="navbar">
				<div class="logo">企业管理系统</div>

				<el-menu class="nav-menu" mode="horizontal" background-color="#fff" text-color="#333"
					active-text-color="#409EFF">
					<el-menu-item index="1">首页</el-menu-item>
					<el-submenu index="2">
						<template slot="title">产品管理</template>
						<el-menu-item index="2-1">产品列表</el-menu-item>
						<el-menu-item index="2-2">产品分类</el-menu-item>
						<el-menu-item index="2-3">库存管理</el-menu-item>
					</el-submenu>
					<el-menu-item index="3">订单管理</el-menu-item>
					<el-menu-item index="4">客户管理</el-menu-item>
					<el-menu-item index="5">数据分析</el-menu-item>
				</el-menu>

				<div class="user-info" v-if="is_login">
					<img class="avatar" src="../img/1.png" alt="用户头像">
					<el-dropdown>
						<span class="el-dropdown-link">
							{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>个人中心</el-dropdown-item>
							<el-dropdown-item>系统设置</el-dropdown-item>
							<el-dropdown-item divided>
								<a href="#" @click="logout">退出登录</a>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="user-info" v-else>
					<el-dropdown>
						<span class="el-dropdown-link">
							请<a href="login.html">登录</a><i class="el-icon-arrow-down el-icon--right"></i>
						</span>

					</el-dropdown>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				username: '',
				is_login: false
			}
		},
		methods: {
			isLogin() {
				// 1.看看前端是否保存了信息
				let token = localStorage.getItem('token')
				if (token === null || token === undefined) {
					this.is_login = false
					return
				}
				// 2.前端的信息和后端信息是否一致
				axios({
					method: 'get',
					url: 'http://localhost:8080/auth/is_login',
					headers: {
						token: token
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.is_login = false
						return
					}
					this.username = resp.data.data
					this.is_login = true
				})
			},
			logout() {
				console.log('执行了登出操作')
				let token = localStorage.getItem('token')
				axios({
					method: 'delete',
					url: 'http://localhost:8080/auth/logout',
					headers: {
						token: token
					}
				}).then(resp => {
					if (!resp.data.success) {
						this.$message({
							message: resp.data.error,
							type: 'error'
						});
						return
					}
					this.is_login = false
					localStorage.removeItem('token')
				})
			}
		},
		created() {
			this.isLogin()
		}
	})
</script>